<template>
  <div style="min-height: 500px">
    <el-table :data="state.allUsers"  ref="pageUserTable"  tooltip-effect="dark" border style="width: 100%" @selection-change="handleSelectionChange" >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="用户姓名" prop="name"></el-table-column>
    </el-table>
    <div class="mt_5 tac">
      <el-button type="primary" size="default" @click="savePageUser">确定</el-button>
    </div>
  </div>
</template>

<script setup name="pageUser">
import request from '/@/utils/request';
import {reactive, ref, onMounted, defineAsyncComponent, defineProps, nextTick} from "vue";
import {ElMessage} from "element-plus";

const pageUserTable = ref(null)
let props = defineProps({
  pageId : {type : Number, default: 0}
})

const state = reactive({
  allUsers :[],
  selectUsers:[],
})
const handleSelectionChange = (selectRows)=>{
  state.selectUsers = selectRows
}
const savePageUser = () =>{
  let pageUsers = [];
  state.selectUsers.forEach((r)=>{
    pageUsers.push(r.id)
  })
  request({
    url: '/pageadmin/savepageuser',
    data: {pageId : props.pageId, pageUsers:pageUsers}
  }).then(res=>{
    if(res.code === '200'){
      ElMessage.success(res.msg)
    }
  })
}
const loadPageUser = () =>{
  request({
    url: '/pageadmin/listpageuser',
    data: {pageId : props.pageId}
  }).then(res => {
    const { data } = res
    state.allUsers = data.allUser
    nextTick(()=>{
      state.allUsers.forEach((item)=>{
        if(data.pageUser.filter((u)=> u.id === item.id).length > 0){
          pageUserTable && pageUserTable.value.toggleRowSelection(item, true)
        }
      })
    })
  })
}
onMounted(()=>{
  loadPageUser();
})
</script>
<style scoped>

</style>
